<template>
  <section class="app-container">
    <my-header :title="title"></my-header>
    <my-good v-for="item in list" :key="item.id" :goods="item"></my-good>
    <my-footer :list="list"></my-footer>
  </section>
</template>

<script>
// 目标1:自定义头部
// 1.1 在MyHeader中定义props
// 1.2 在props中加一些限制条件(类型/默认值/必选项)
// 1.3 子组件中使用这些数据
// 1.4 父组件中传入这些数据,根据需求来传递(标题内容/文字颜色/背景色)

// 目标2:获取数据
// 2.1下包,在main中引入
// 2.2设置baseURL
// 2.3将axios挂载到Vue的原型上
// 2.4在APP.vue中created时调用全局属性 this.$axios,请求/api/cart

// 目标3:渲染数据
// 3.1 App.vue中将回调的数据保存到data中
// 3.2 使用v-for循环渲染MyGoods组件
// 3.3 循环是将循环的数据传递给MyGoods(父传子)
// 3.4 子组件接收到数据后,使用即可

// 目标4:勾选状态处理
// 4.1 在MyGoods.vue中双向绑定goods_state给复选框
// 4.2 动态绑定id给复选框
// 4.3 动态绑定相同的id给label的for属性

// 目标5:商品数量
// 5.1 将goods从MyGoods.vue中传给MyCount.vue(建议直接传对象,否则数据同步很麻烦)
// 5.2 在MyCount.vue中使用v-model进行双向绑定
// 5.3 给按钮实现自增或自减(做边界处理)
// 5.4 使用watch强行修改超出边界的数据

// 目标6:全选功能
// 6.1 在MyFooter.vue使用v-model双向绑定一个计算属性isAll
// 6.2 在set方法中修改所有小选框状态
// 6.3 在get方法中使用every同级所有的小选框状态并返回

// 目标7:数量统计
// 7.1 在MyFooter.vue 定义计算属性allCount
// 7.2 遍历数组中所有的数据,判断勾选状态
// 7.3 如果勾选了就累加商品数量求和
// 7.4 使用插值表达式渲染在指定区域

// 目标8:总价统计
// 8.1 在MyFooter.vue定义计算属性allPrice
// 8.2 遍历数组中所有的数据,判断勾选状态
// 8.3 如果勾选了就累加商品数量和单价的乘积
// 8.4 使用插件表达式渲染在指定区域

// 导入组件
import MyHeader from "./components/MyHeader.vue";
import MyGood from "./components/MyGood.vue";
import MyFooter from "./components/MyFooter.vue";

export default {
  components: {
    MyHeader,
    MyGood,
    MyFooter,
  },
  data() {
    return {
      title: "购物车案例",

      list: [],
    };
  },
  // 尽可能早的发送AJAX请求
  async created() {
    // 使用axios发请求
    let res = await this.$axios({ url: "/api/cart" });
    // console.log(res);
    this.list = res.data.list;

    // 学习reduce
    // reduce的作用:将结果累加成单个并返回
    let arr = [1, 2, 3];
    // reduce有两个参数:参数1 回调函数 参数2 初始值
    // let results=arr.reduce(回调函数,初始值)
    // 回调函数有4个参数
    // 参数1:累积器
    // 参数2:当前值
    // 参数3:当前索引
    // 参数4:源数组
    // 建议写代码时带上初始值
    // 如果不写初始值,sum就是数组中的第一个元素,并且返回循环从第二个元素,并且循环从第二个元素开始
    arr.reduce((sum, item) => {
      // reduce的会掉函数中必须return结果，而return的结果会作为下一次循环式的累积器的值
      return sum + item;
    }, 0);
  },
};
</script>

<style lang="less" scoped>
.app-container {
  padding: 45px 0 50px 0;
}
</style>
